{% extends 'overview/base.html' %}

{% block external %}
	{% load static %}
	<link rel="stylesheet" type="text/css" href="{% static 'css/users/space/common.css' %}"/>
	{% block space-external %}
	{% endblock %}
{% endblock %}

{% block main %}
	<div class="container">
		<div class="row">
			<div class="col-sm-4">
				<!--用户个人信息-->
				<div class="user-space-information-box">
					<!--头部，介绍用户的头像，用户名，邮箱-->
					<div class="user-space-information-box-header">
						<div class="media">
		          <div class="media-left">
		            {% if user.image %}
		              <img src="{{ user.image.url }}" alt="头像" class="img-circle" style="height: 50px; width: 50px; box-shadow: 0 0 10px #e3e3e3;"/>
		            {% else %}
		              <img src="{% static 'images/users/settings/sample.jpg'%}" alt="头像" class="img-circle" style="height: 50px; width: 50px; box-shadow: 0 0 10px #e3e3e3;"/>
		            {% endif %}
		          </div>
		          <div class="media-body">
		            <h4 class="media-heading">{{ user.username }}</h4>
		            <p class="small">{{ user.email }}</p>
		          </div>
	        	</div>
					</div>
					<!--介绍用户的创建时间，发表文章数，留言数-->
					<div class="user-space-information-box-body">
						<p><span class="glyphicon glyphicon-dashboard"></span><span class="pull-right">{{ user.date_joined|date:'Y-m-d' }}</span></p>
						<p><span class="glyphicon glyphicon-pencil"></span><span class="pull-right">{{ user.departmentpost_set.count }} + {{ user.associationpost_set.count }}</span></p>
						<p><span class="glyphicon glyphicon-comment"></span><span class="pull-right">{{ user.platepost_set.count }}</span></p>
					</div>
				</div>
				<!--用户创作中心-->
				<div class="user-space-management-box">
					<div class="user-space-management-box-header">
						<h4 class="text-center">创作中心</h4>
					</div>
					<div class="user-space-management-box-body">
						<ul class="nav nav-pills">
							<li><a href="{% url 'users:space' user.id %}"><span class="glyphicon glyphicon-star"></span>动态</a></li>
						  <li><a href="{% url 'users:space-post-list' user.id %}"><span class="glyphicon glyphicon-pencil"></span>文章</a></li>
						  <li><a href="{% url 'users:space-comment-list' user.id %}"><span class="glyphicon glyphicon-comment"></span>留言</a></li>
						</ul>
					</div>
				</div>
				<!--分区，用于切换最新文章，留言-->
				<div class="panel panel-primary">
					<div class="panel-heading">
						<a href="#" class="text-center" style="color: white;">more(目前点了没用)</a>
					</div>
				</div>
			</div>
			<!--该用户的最近动态-->
			<div class="col-sm-8">
				{% block space-main %}
				{% endblock %}
			</div>
		</div>
	</div>
{% endblock %}

<!--去掉尾部-->
{% block footer %}
	<hr/>
	<p class="text-center">@</p>
{% endblock %}